import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import WeatherGauge from '@/components/WeatherGauge';
import PowerChart from '@/components/PowerChart';
import MetricsCard from '@/components/MetricsCard';
import ForecastBarChart from '@/components/ForecastBarChart';
import { weatherData, powerData, metricsData, forecastData } from '@/types/data';
import useInterval from '@/hooks/useInterval';

export default function DataDashboard() {
  const [weather, setWeather] = useState(weatherData);
  const [power, setPower] = useState(powerData);
  const [metrics, setMetrics] = useState(metricsData);

  useInterval(() => {
    setWeather(prev => ({
      ...prev,
      temp_avg: prev.temp_avg + (Math.random() * 2 - 1),
      humidity: parseFloat(Math.min(100, Math.max(0, prev.humidity + (Math.random() * 5 - 2.5))).toFixed(1))
    }));
  }, 5000);

  useInterval(() => {
    setPower(prev => {
      if (!prev || prev.length === 0) {
        return Array.from({ length: 24 }, (_, i) => ({
          timestamp: `${i}:00`,
          actual: 100 + Math.random() * 50,
          predicted: 110 + Math.random() * 40
        }));
      }
      
      const newData = [...prev.slice(1)]; 
      const lastValue = prev[prev.length - 1].actual;
      const newValue = lastValue * (0.95 + Math.random() * 0.1);
      
     
      newData.push({
        timestamp: `${new Date().getHours()}:${new Date().getMinutes()}`,
        actual: newValue,
        predicted: newValue * (0.9 + Math.random() * 0.2) 
      });
      
      return newData;
    });
  }, 3000);

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1
      }
    }
  };

  const itemVariants = {
    hidden: { y: 20, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      transition: {
        duration: 0.5
      }
    }
  };

  return (
    <div className="min-h-screen bg-gray-900 p-4 text-white">
      <style>
        {`
          @import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500&display=swap');
          @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500&display=swap');
        `}
      </style>
      
      <motion.div 
        className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-7xl mx-auto"
        variants={containerVariants}
        initial="hidden"
        animate="visible"
      >
        {/* 天气数据仪表盘 */}
        <motion.div 
          className="bg-gray-800 bg-opacity-80 backdrop-blur-md rounded-lg p-4 border border-gray-700 hover:border-blue-400 transition-all hover:shadow-lg hover:shadow-blue-500/20 hover:-translate-y-1"
          variants={itemVariants}
        >
          <WeatherGauge data={weather} />
        </motion.div>

        {/* 电力负荷预测图 */}
        <motion.div 
          className="bg-gray-800 bg-opacity-80 backdrop-blur-md rounded-lg p-4 border border-gray-700 hover:border-blue-400 transition-all hover:shadow-lg hover:shadow-blue-500/20 hover:-translate-y-1"
          variants={itemVariants}
        >
          <PowerChart />
        </motion.div>

        {/* 模型指标看板 */}
        <motion.div 
          className="bg-gray-800 bg-opacity-80 backdrop-blur-md rounded-lg p-4 border border-gray-700 hover:border-blue-400 transition-all hover:shadow-lg hover:shadow-blue-500/20 hover:-translate-y-1"
          variants={itemVariants}
        >
          <MetricsCard data={metrics} />
        </motion.div>

        {/* 预测值柱状图 */}
        <motion.div 
          className="bg-gray-800 bg-opacity-80 backdrop-blur-md rounded-lg p-4 border border-gray-700 hover:border-blue-400 transition-all hover:shadow-lg hover:shadow-blue-500/20 hover:-translate-y-1"
          variants={itemVariants}
        >
          <ForecastBarChart 
            data={forecastData} 
            averageValue={power.reduce((sum, item) => sum + item.predicted, 0) / power.length}
            accuracy={power.reduce((sum, item) => sum + (1 - Math.abs(item.predicted - item.actual) / item.actual), 0) / power.length}
          />
        </motion.div>
      </motion.div>
    </div>
  );
}